<template>
  <view  class="bg-151518" style="'padding-bottom: calc(var(--window-bottom) + 50px);">
    <view :style="{ backgroundColor: bgC ? '#fff' : '#151518',color: bgC ? '#fff' : '#000' }">
      <u-navbar   titleStyle="#000" title="订单中心" bgColor="#1D1D29" :placeholder="true" :autoBack="true" leftIconSize="0" leftIconColor="#FFFFFF"></u-navbar>
    </view>
    <view scroll-x class=" nav scroll-tab flex flex-space-between"  :style="{ backgroundColor: bgC ? '#fff' : '#151518',color: bgC ? '#fff' : '#000' }"> 
      <view class="tabs-item font28" :class="items.type == TabCura ? 'active cur' : ''" v-for="(items, indexx) in tabList" :key="indexx" @tap="tabSelect" :data-id="items.type">
        {{ items.title }}
      </view>
    </view>
<!--    <z-paging
      :paging-style="{ 'background-color': '#151518', top: top + 'px' }"
      ref="paging"
      v-model="dataList"
      :safe-area-inset-bottom="true"
      :auto-show-back-to-top="true"
      :use-page-scroll="false"
      @query="queryList"
    > -->
    <z-paging
      :paging-style="{ backgroundColor: bgC ? '#f3f3f3' : '#151518', top: top + 'px' }"
      ref="paging"
      v-model="dataList"
      :safe-area-inset-bottom="true"
      :auto-show-back-to-top="true"
      :use-page-scroll="false"
      @query="queryList"
    >
      <view slot="empty" class="flex flex-center flex-column">
        <image v-if="bgC" style="width: 400rpx; height: 400rpx"  :src="httpurl + '/static/uniapp/img/ht.png'" mode="scaleToFill"></image>
        <image v-else  style="width: 300rpx; height: 176rpx" :src="httpurl+'/static/uniapp/img/empty.png'" mode="scaleToFill"></image>
        <u-gap height="60rpx"></u-gap>
        <text class="font26" style="color: #606060">暂时没有相关信息</text>
      </view>
      <view class="bg-151518" slot="top" style="box-shadow: 0 1px 3px rgb(0 0 0 / 10%); margin-bottom: 3rpx">
      </view>
      <view  :class="themeClass" class="item bg-272735" v-for="(item, index) in dataList" :key="index">
        <view class="heise"></view>
        <view class="cu-bar  flex justify-between">
          <!-- <view class="cu-bar solid-bottom flex justify-between"> -->
          <view class="color-w">
            <view class="text-sm margin-sm"  :class="themeClass">订单号：{{ item.batchno }}</view>
            <view class="text-xs margin-sm"  :class="themeClass">
              <text class="cuIcon-time"></text>
              {{ item.create_time }}
              <view  v-if="item.loadnum != 0" style="display: flex" >
                <!-- 取消确认按钮 -->
                <!-- <view class="quxiao">取消</view> -->
                <view class="quxiao" @click.stop="queren(item)">修改费率</view>
                <view class="quxiao" @click.stop="quxiao(item)">取消</view>
              </view>
            </view>
          </view>
          <view class="">
            <view :class="themeClass" class="text-sm margin-sm text-grey" @tap="goDetail" :data-order="item.batchno">
              查看详情
              <text class="cuIcon-right"></text>
            </view>
            <view  class="text-sm margin-sm">
              <text class="text-gray" v-if="item.loadnum != 0">处理中</text>
              <text class="text-green text-right" v-if="item.loadnum == 0 && item.noclearingnum != 0">待结算</text>
              <text class="text-green text-right" v-else>处理完成</text>
            </view>
          </view>
        </view>
        <view class="grid col-4 padding-sm dishe"  :class="themeClass">
          <view class="text-center">
            <view class="margin-sm text-gray">订单类型</view>
            <view>{{ item.title }}</view>
          </view>
          <view class="text-center">
            <view class="margin-sm text-gray">总面值</view>
            <view class="text-price text-orange" style="font-size: 32rpx; padding-top: 4rpx">{{ item.money }}</view>
          </view>
          <view class="text-center">
            <view class="margin-sm text-gray">总数量</view>
            <view>{{ item.ids }}张</view>
          </view>
          <view class="text-center">
            <view class="margin-sm text-gray">已结算</view>
            <!-- <view class="text-orange text-price" style="font-size: 32rpx; padding-top: 4rpx">{{ parseFloat(item.amount).toFixed(2) }}</view> -->
            <view class="text-orange text-price" style="font-size: 32rpx; padding-top: 4rpx">{{ parseFloat(item.clearing).toFixed(2) }}</view>
          </view>
          <view class="text-center">
            <view class="margin-sm text-gray">未结算</view>
            <view class="text-orange text-price" style="font-size: 32rpx; padding-top: 4rpx">{{ parseFloat(item.noclearing).toFixed(2) }}</view>
          </view>
          <view class="text-center" style="width: 200rpx;">
            <view class="margin-sm text-gray">已结算数量</view>
            <view class="text-orange " style="font-size: 32rpx; padding-top: 4rpx;color: #ffefcd;">{{ item.clearingnum }}</view>
          </view>
          <view class="text-center" style="width: 200rpx;">
            <view class="margin-sm text-gray" >未结算数量</view>
            <view class="text-orange " style="font-size: 32rpx; padding-top: 4rpx;color: #ffefcd;">{{ item.noclearingnum }}</view>
          </view>
        </view>
        <view class="grid col-3 padding-sm text-gray text-sm" style="margin-bottom: 20rpx;">
          <view class="neil">
            处理中
            <text class="text-orange margin-left-sm">{{ item.loadnum }}</text>
          </view>
          <view class="neil">
            成功
            <text class="text-green margin-left-sm">{{ item.oknum }}</text>
          </view>
          <view class="neil">
            失败
            <text class="text-red margin-left-sm">{{ item.errnum }}</text>
          </view>
        </view>
      </view>
      <u-gap height="300rpx"></u-gap>
    </z-paging>
    <view class="cu-modal drawer-modal justify-end" :class="modalName == 'DrawerModalR' ? 'show' : ''" @tap="hideModal">
      <view class="cu-dialog basis-lg" @tap.stop="">
        <view class="" :style="'padding-top:' + barHeight + 'px'">
          <view class="margin-sm">
            <text class="text-bold text-gray">时间筛选</text>
          </view>
          <view class="grid col-2 bg-gray padding-xs">
            <view class="padding-xs text-center" @tap="stime" data-day="1">
              <view class="bg-blue padding-xs radius">
                <text>今天</text>
              </view>
            </view>
            <view class="padding-xs text-center" @tap="stime" data-day="7">
              <view class="bg-blue padding-xs radius">
                <text>7天</text>
              </view>
            </view>
            <view class="padding-xs text-center" @tap="stime" data-day="31">
              <view class="bg-blue padding-xs radius">
                <text>一个月</text>
              </view>
            </view>
            <view class="padding-xs text-center" @tap="stime" data-day="62">
              <view class="bg-blue padding-xs radius">
                <text>2个月</text>
              </view>
            </view>
          </view>
          <view class="margin-sm bg-white">
            <text class="text-bold text-gray">关键词筛选</text>
            <scroll-view scroll-x class="bg-white nav text-center margin-top-sm">
              <view class="flex text-center">
                <view
                  class="cu-item flex-sub"
                  style="height: 60rpx; line-height: 60rpx"
                  :class="item.type == Tabs ? 'text-purple cur' : ''"
                  v-for="(item, inde) in sList"
                  :key="inde"
                  @tap="tabS"
                  :data-id="item.type"
                >
                  {{ item.title }}
                </view>
              </view>
            </scroll-view>
            <view class="inupa margin-top-xl">
              <input type="text" v-model="keys" :placeholder="placeholder" />
            </view>
            <view class="flex margin-top-sm">
              <button class="flex-sub cu-btn bg-orange margin-sm" @tap="restdata">重置</button>
              <button class="flex-sub cu-btn bg-blue margin-sm" @tap="seach">查询</button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <v-footer tab="orders" class="buttonmenu"></v-footer> -->
    <v-footer :tab="'orders'" :bgColor="bgC" class="buttonmenu"></v-footer>
    <!-- 弹层 -->
    <u-modal
    	:show="showEdit"
    	cancelText="取消"
    	confirmText="确定"
    	title="设置折扣值"
    	:showCancelButton="true"
    	@cancel="showEdit = false"
    	@confirm="handlerConfirm"
    >
    	<view class="">
    		<view class="flex flex-align-center">
    			<input
    			style="border: 1px solid #eee;"
    			:value="discount"
    			type="digit"
    			@input="handlerInput"
    			placeholder="请输入折扣值">
    			</input>
    			%
    		</view>
        <view class="color-EBCC9D font24 flex flex-center padding-20-0">
        	数值越高回收越慢
        </view>
    	<!-- 	<view class="color-EBCC9D font24 flex flex-center padding-20-0">
    			可以输入的折扣值 {{ pricemin*100 }}%-{{ 
            pricemax*100 }}%
    			数值越高回收越慢
    		</view> -->
    	</view>
    </u-modal>
    <!-- #ifdef MP-WEIXIN -->
    <v-kefu @tap="tokefu()"></v-kefu>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view @click="tokefu()" class="">
      <v-kefu></v-kefu>
    </view>
    <!-- #endif -->
    <v-popup @update:isShow="isShow = $event" :isShow="isShow"></v-popup>
  </view>
</template>
<script>
import footer from '@/components/footer.vue';
import hoverBall from '@/components/hover-ball/hover-ball.vue';
import kefu from '@/components/kefu.vue';
import popup from '@/components/popup.vue';
export default {
  components: { 'v-footer': footer, hoverBall, 'v-kefu': kefu ,'v-popup': popup},
  data() {
    return {
      PageCur: 'orders',
      tabList: [
        { title: '全部订单', type: 0 },
        { title: '处理完成', type: 1 },
        { title: '处理中', type: 2 },
        { title: '待结算', type: 3 }
      ],
      sList: [
        { title: '订单号', type: 0 },
        { title: '卡号/卡密', type: 1 }
      ],
      dataList: [],
      placeholder: '订单号',
      TabCura: 0,
      barHeight: 0,
      Tabs: 0,
      keys: null,
      modalName: null,
      day: null,
      top: 0,
      showEdit:false,//弹框
      discount:'',
      batchno:'',//第一个值、
      feilv:'',//第二个值
      pricemax:'',
      pricemin:''  ,
      isShow: 0 ,//控制客服弹出层
      currentTheme: '', //背景色
      bgC: false,//控制背景色
      httpurl: '' //图片链接
    };
  },
  onShow() {
    var that = this;
    this.bgC = that.app.background;
    this.currentTheme = this.getTheme();
        this.httpurl = this.app.httpUrl;
  },
  // 计算属性返回css样式
  computed: {
    themeClass() {
      return `theme-${this.currentTheme}`;
    }
  },
  onLoad() {
    this.currentTheme = this.getTheme();
    this.isShow=false
    // #ifdef MP-WEIXIN || MP-ALIPAY
    const { top, bottom } = uni.getMenuButtonBoundingClientRect();
    console.log('bottom', bottom, 'top', top);
    // #endif
    const dpi = uni.getStorageSync('dpi');
    const sysTem = uni.getStorageSync('sysTem');
    this.top = sysTem.statusBarHeight + 44 + 90 / dpi;
    // #ifdef MP-ALIPAY
    this.top = sysTem.statusBarHeight + 44 + 45;
    // #endif
    this.barHeight = uni.getSystemInfoSync().statusBarHeight;
  },
  methods: {
    // 获取本地样式
    getTheme() {
      return uni.getStorageSync('theme') || 'dark';
    },
    // 点击客服
    tokefu() {
      this.isShow = !this.isShow;
    },
    // 修改费率方法
    handlerInput (e) {
    	let { value } = e.detail;
    	value = parseFloat(value); //将输入值转换成浮点型
    	console.log('Number.isInteger(value)', Number.isInteger(value))
    	var decimalPart = String(value).split('.')[1]; //提取小数部分
    	if (decimalPart) { //如果小数部分超过了两位
    		if (decimalPart.length >= 2) {
    			this.discount = value.toFixed(2);
    			this.$forceUpdate()
    		} else {
    			this.discount = value
    		}
    	} else {
    		this.discount = value
    	}
    },
    
    // 弹层的确认按钮
  async  handlerConfirm () {
    // let { cardItem, discount } = this.$data  123;
    	// let min = this.pricemin*100, max = this.pricemax*100
    	// if (this.discount > max) {
    	// 	uni.showToast({
    	// 		icon: 'none',
    	// 		title: '不能超出折扣范围'
    	// 	})
    	// 	this.discount = this.feilv*100
    	// 	return
    	// } 
    	// if (this.discount < min) {
    	// 	uni.showToast({
    	// 		icon: 'none',
    	// 		title: '不能低于折扣范围'
    	// 	})
    	// 	this.$nextTick(() => {
    	// 		this.discount = this.feilv*100
    	// 	});
    	// 	return
    	// } 
      const params = {
        feilv: (this.discount/100).toFixed(4),
        batchno: this.batchno,
      };
      var that = this;
     await uni.request({
        method: 'POST',
        url: that.app.apiHost + '/editrate',
        header: { Authorization: 'bearer ' + that.app.getAuthCode() },
        data: params,
        success: (data) => {
        console.log(data);
        uni.showToast({
        	icon: 'none',
        	title: data.data.msg
        })
        }
      });
      this.discount='',//清空输入内容
      this.batchno='',
      this.feilv='',
      this.pricemax='',
      this.pricemin=''
      this.showEdit = false//关闭弹层
    },
    // 弹层取消按钮
    quxiao (value) {
      this.batchno=value.batchno
      // 
        const params = {
          batchno: this.batchno
        };
        var that = this;
        uni.request({
          method: 'POST',
          url: that.app.apiHost + '/cancel',
          header: { Authorization: 'bearer ' + that.app.getAuthCode() },
          data: params,
          success: (data) => {
          uni.showToast({
          	icon: 'none',
          	title: data.data.msg,
          })
          }
        });
      },
    // 点击修改费率
    queren(value) {
      console.log(111,value);
      this.batchno=value.batchno
      this.feilv=value.feilv
      // this.pricemax=value.bsLei.pricemax
      // this.pricemin=value.bsLei.pricemin
      this.showEdit=true
    },

    //
    goorder() {
      uni.navigateBack({
        delta: -1
      });
    },
    change() {
      this.modalName = 'DrawerModalR';
    },
    restdata() {
      this.day = null;
      this.keys = null;
    },
    seach() {
      this.modalName = null;
      this.$refs.paging.reload();
    },
    showModal(e) {
      this.modalName = e.currentTarget.dataset.target;
    },
    hideModal(e) {
      this.modalName = null;
    },
    goDetail(e) {
      uni.navigateTo({
        url: 'detail?orderno=' + e.currentTarget.dataset.order
      });
    },
    stime(e) {
      this.modalName = null;
      this.day = e.currentTarget.dataset.day;
      this.$refs.paging.reload();
    },
    queryList(pageNo, pageSize) {
      const params = {
        pageNo: pageNo,
        pageSize: pageSize,
        status: this.TabCura,
        day: this.day,
        rekey: this.keys,
        setype: this.Tabs
      };
      var that = this;
      uni.request({
        method: 'POST',
        url: that.app.apiHost + '/orders',
        header: { Authorization: 'bearer ' + that.app.getAuthCode() },
        data: params,
        success: (data) => {
          if (data.data.code == -1) {
            that.app.showMsg('请登陆后再操作!', '../login/login');
          }
          let list = data.data.data.data;
          that.$refs.paging.complete(list);
          console.log(1111111,data.data.data.data);
        },
        fail(a) {
          that.$refs.paging.complete(false);
        }
      });
    },
    tabSelect(e) {
        console.log(11,e);
      this.TabCura = e.currentTarget.dataset.id;
      this.$refs.paging.reload();
    },
    tabS(e) {
      this.Tabs = e.currentTarget.dataset.id;
      if (this.Tabs == 0) {
        this.placeholder = '订单号';
      } else {
        this.placeholder = '卡号/卡密';
      }
    }
  }
};
</script>

<style lang="scss">
  /* 定义主题样式 */
  .theme-dark {
    background-color: #272735;
    color: #ffefcd;
  }
  
  .theme-light {
    background-color: #fff;
    color: #000;
  }
.quxiao {
  color: #ebcc9d;
  text-align: center;
  margin-right: 20rpx;
  margin-top: 10rpx;
  font-size: 30rpx;
  border-radius: 20rpx;
  
}
.scroll-tab {
  .tabs-item {
    height: 45px;
    color: #5c5c78;
    padding: 0 30rpx;
    text-align: center;
    line-height: 90rpx;
    display: inline-block;
    position: relative;
    &.active {
      color: #ebcc9d;
    }
  }
  .active::after {
    content: '';
    width: 40rpx;
    height: 8rpx;
    position: absolute;
    background: linear-gradient(180deg, #fd9d55 0%, #f57843 100%);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
.item {
  z-index: 1;
  position: relative;
  align-items: center;
  justify-content: space-between;
  border-radius: 15px;
}
.mss .neil {
  float: right;
  margin-right: 10rpx;
}

.heise {
  height: 15rpx;
}
.rights {
  position: absolute;
  top: 20px;
  right: 20px;
}
.anjian {
  margin-top: 20rpx;
}
.anjian button {
  margin-right: 15px;
  padding: 3px 15px;
  height: 28px;
}
.dishe {
  // border-top: #e5e5e5 1px dashed;
  // border-bottom: #e5e5e5 1px dashed;
  // background-color: #f0fddd;
}

.serch {
  position: fixed;
  top: 80px;
  right: 20px;
  border-radius: 50%;
  width: 80rpx;
  height: 80rpx;
  z-index: 999;
}
.inupa {
  border-bottom: 1px solid #0081ff;
}
</style>
